<template>
  <view class="oto-swiper" :style="[swiperStyle]">
    <swiper
      class="swiper"
      :style="[getSwiperRealStyle]"
      :indicator-dots="false"
      :autoplay="autoplay"
      :interval="interval"
      :duration="duration"
      :current="current"
      :circular="circular"
      @change="swiperChange"
    >
      <template v-for="(item, index) in list">
        <swiper-item
          class="swiper-item"
          :style="{
            borderRadius: getSwiperRealStyle.borderRadius
          }"
          :key="index"
        >
          <slot v-if="imageCustom" :item="item" name="image-item"></slot>
          <image v-if="!imageCustom" class="swiper-img" :src="item.path" />
        </swiper-item>
      </template>
    </swiper>
    <view
      v-if="indicatorDots"
      :style="{
        marginTop: indicatorDotsMarginTop
      }"
      class="indicator-dots"
      :class="{ 'indicator-dots-in-swiper': indicatorDotsInswiper }"
    >
      <view class="indicator-dots-body">
        <template v-for="(item, index) in list">
          <view class="point" :class="{ 'point-active': index === current }" :key="index"> </view>
        </template>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    name: 'OtoSwiper',
    props: {
      customStyle: {
        type: Object,
        default() {
          return {};
        }
      },
      width: {
        type: String,
        default: '100%'
      },
      height: {
        type: String,
        default: ''
      },
      list: {
        type: Array,
        default() {
          return [];
        }
      },
      // 是否自动切换
      autoplay: {
        type: Boolean,
        default: true
      },
      // 切换时间
      interval: {
        type: Number,
        default: 3000
      },
      // 切换过渡时间
      duration: {
        type: Number,
        default: 500
      },
      // 首尾是否衔接
      circular: {
        type: Boolean,
        default: false
      },
      swiperRealStyle: {
        type: Object,
        default() {
          return {};
        }
      },
      // 分页标识是否显示
      indicatorDots: {
        type: Boolean,
        default: true
      },
      // 分页标识在外还是内
      indicatorDotsInswiper: {
        type: Boolean,
        default: true
      },
      // 默认开启图片自定义插槽
      imageCustom: {
        type: Boolean,
        default: false
      },
      indicatorDotsMarginTop: {
        type: String,
        default: '30px'
      }
    },
    data() {
      return {
        current: 0
      };
    },
    computed: {
      swiperStyle() {
        let style = {};
        style.width = this.width;
        style.height = this.height;
        style = Object.assign(style, this.customStyle);
        return style;
      },
      getSwiperRealStyle() {
        let style = {};
        style = Object.assign(style, this.swiperRealStyle);
        return style;
      }
    },
    methods: {
      swiperChange(e) {
        const { current, source } = e.detail;
        if (source === 'autoplay' || source === 'touch') {
          this.current = Number(current);
        }
      }
    }
  };
</script>

<style lang="scss" scoped>
  .oto-swiper {
    width: 100%;
    min-height: 150rpx;
    opacity: 1;
    position: relative;

    .swiper {
      width: 100%;
      height: 100%;
      border-radius: 24rpx;
      box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.25);
      overflow: hidden;
      .swiper-item {
        width: 100%;
        height: 100%;
        border-radius: 24rpx;
        overflow: hidden;
      }
      .swiper-img {
        width: 100%;
        height: 100%;
      }
    }

    .indicator-dots {
      margin-top: 30rpx;
      .indicator-dots-body {
        display: flex;
        justify-content: center;
        .point {
          width: 13rpx;
          height: 10rpx;
          border-radius: 4rpx;
          opacity: 1;
          background: #eaeaea;
          &:not(:last-child) {
            margin-right: 7rpx;
          }
        }
        .point-active {
          width: 22rpx;
          height: 10rpx;
          border-radius: 4rpx;
          opacity: 1;
          background: #5d5fef;
        }
      }
    }
    .indicator-dots-in-swiper {
      position: absolute;
      bottom: 20rpx;
      left: 50%;
      transform: translateX(-50%);
      margin-top: 0;
    }
  }
</style>
